export const form_ipt_com = {
  input:
    // eslint-disable-next-line max-len
    'border border-solid border-bdr-1 outline-none rounded px-2 py-1 text-sm placeholder:text-sm w-full focus:border-color-21 focus:shadow-sld disabled:bg-color-19 h-8 cursor-pointer flex-1',
  'box:input:normal': 'h-8 text-sm relative flex-1',
  'box:outlined:normal': '',
  'box:outlined:bordered': '',
  'password:icon': 'text-lg text-color-21 cursor-pointer absolute right-3',
};

export const form_iptarea_com = {
  input:
    // eslint-disable-next-line max-len
    'border border-solid border-color-24 outline-none rounded px-2 py-1 text-base placeholder:text-base w-full focus:border-color-22 focus:shadow-sld disabled:bg-color-19 cursor-pointer flex-1 bg-color-24 leading-6',
  'box:input:normal': 'text-sm relative flex-1',
  'box:outlined:normal': '',
  'box:outlined:bordered': '',
  'password:icon': 'text-lg text-color-21 cursor-pointer absolute right-3',
};

export const form_ipt_com_1 = {
  input:
    // eslint-disable-next-line max-len
    'border border-solid border-color-24 outline-none rounded pl-12 pr-2 py-3 text-base placeholder:text-base w-full focus:border-color-22 focus:shadow-sld disabled:bg-color-19 cursor-pointer flex-1 bg-color-24',
  'box:input:normal': 'relative flex-1',
  'box:outlined:normal': '',
  'box:outlined:bordered': '',
  'password:icon': 'text-lg text-color-21 cursor-pointer absolute right-3',
};

export const form_slt_com = {
  input: form_ipt_com_1,
  suffix: 'text-ipt-focus text-base transition-all duration-300 absolute right-1 top-3 p-2 text-color-21',
  dropdown: 'absolute cursor-default left-0 z-100 w-full bg-color-24 top-0 overflow-hidden transition-all ease-in-out duration-300 ease-in-out border-x border-b border-color-21 rounded-b',
  value: 'absolute top-3 h-6 bottom-0 right-8 left-12 flex items-center max-w-full pointer-events-none z-1 truncate',
  'value:normal': '',
};

export const form_slt_suffix_com = 'text-color-21 text-base transition-all duration-300 absolute right-0 top-0 p-2';

export const form_lable = 'min-w-20 text-text-3 mr-2 text-justify text-last-justify text-nowrap';

export default {
  infinitescroll_cn: {
    box: 'overflow-x-hidden overflow-y-auto h-full',
    'loading:box': 'absolute bottom-2.5 left-0 right-0',
    loading: {
      'box:spinner': 'relative inline-block w-4 h-4 max-h-full max-w-full align-middle steps-12 animate-rotate-0-360 mx-auto',
      'child:spinner': 'absolute top-0 left-0 w-full h-full text-primary before:block before:w-0.5 before:h-1/4 before:bg-current before:rounded-2/5 before:mx-auto before:my-0 spinner',
    },
  },
  countdown_cn: {
    box: 'px-2 ml-2 bg-color-19 rounded py-1',
    time: '',
    split: 'text-base',
  },
  select_cn: {
    box: 'relative',
    input: {
      box: 'flex items-center relative transition-border-bg-color duration-300',
    },
    'input:expand': '',
    'input:retract': '',
    suffix: 'text-ipt-focus text-base transition-all duration-300 absolute right-0 top-0 p-2',
    'suffix:expand': 'rotate-180',
    'suffix:retract': 'rotate-0',
    value: 'absolute top-0.5 bottom-0.5 flex items-center max-w-full pointer-events-none z-1',
    'value:expand': '',
    'value:retract': '',
    'value:mini': 'px-2 text-xs',
    'value:small': 'px-3 text-xs text-ipt-focus',
    'value:normal': 'px-3 text-xs',
    'value:large': 'px-4 text-lg',
    dropwrap: 'relative w-full h-0',
    dropdown:
      'absolute cursor-default left-0 z-100 w-full bg-white top-0 text-primary-text overflow-hidden transition-all ease-in-out duration-300 ease-in-out border-x border-b border-color-21 rounded-b',
    'dropdown:expand': 'max-h-64 shadow-md',
    'dropdown:retract': 'max-h-0 shadow-none invisible',
    options: 'max-h-64 transition-transform transition-opacity duration-200 overflow-x-hidden overflow-y-auto bg-bg-5 text-text-20',
    'options:expand': 'opacity-100 translate-y-0 delay-200',
    'options:retract': 'opacity-0 translate-y-4 delay-100',
    option: 'border-split cursor-pointer transition-all duration-250 flex items-center justify-center text-center hover:bg-label last:border-0',
    'option:active': 'font-bold bg-color-21 text-white',
    'option:mini': 'py-0 px-2.5',
    'option:small': 'py-1 px-2.5 text-xs',
    'option:normal': 'py-2 px-2.5',
    'option:large': 'py-2.5 px-2.5',
    optiontext: '',
    selectedicon: 'text-ipt-focus',
    empty: 'flex items-center justify-center py-1 text-sm',
  },
  button_cn: {
    box: 'justify-center flex items-center relative overflow-hidden whitespace-nowrap outline-none duration-200 transition-shadow transition-colors',
    'box:mini': 'text-mini py-0 px-1 h-4 text-center',
    'box:small': 'text-sm py-0 px-3 h-6 text-center text-text-13',
    'box:normal': 'text-base py-0 px-3 py-2 text-center',
    'box:large': 'text-base py-0 px-5 h-10',
    'box:default': 'w-full font-bold bg-color-21 text-white',
    'box:primary': 'text-bdr bg-menu border-transparent',
    'box:link': 'text-color-19 border border-color-19 active:border-color-21 active:text-color-21',
    'box:ghost': 'text-split bg-link shadow-none border-split border',
    'box:success': 'text-white border-transparent rounded',
    'box:warning': 'text-white bg-warning border-transparent',
    'box:error': 'text-white bg-error border-transparent',
    'box:disabled': 'text-split bg-color-19 w-full shadow-none cursor-not-allowed border-transparent',
  },
  checkbox_cn: {
    box: 'inline-flex items-center',
    disabled: 'cursor-not-allowed text-disabled-text',
    value: 'relative w-4.5 h-4.5 duration-200 transition-colors',
    'value:hover': 'border-split bg-ipt-bg rounded  focus-within:border-ipt-focus  focus-within:hover:border-ipt-focus',
    'value:disabled': 'bg-disabled border-disabled',
    'value:checked':
      // eslint-disable-next-line max-len
      'border-bdr bg-ipt-bg rounded animate-checked-animate after:border-l-2 after:border-b-2 after:border-ipt-focus after:absolute after:w-7/10 after:h-2/5 after:translate-x-13/50 after:translate-y-3/5 after:-rotate-45 after:border-primary',
    label: 'mx-2.5',
    checkbox: 'absolute z-1 inset-0 pointer-events-none w-full h-full opacity-0 peer',
  },
  form_cn: {
    box: '',
    item: 'flex flex-1 mb-2.5',
    label: 'relative flex items-center',
    labeltext: form_lable,
    // colon: 'after:content-[":"] after:text-label after:mr-2',
    required: 'before:content-["*"] before:text-error before:absolute before:-left-2',
    control: 'relative w-full',
    'error:def': 'text-mini text-error transition-all duration-300',
    'error:show': 'mt-0 h-4 leading-4 translate-y-0 opacity-100',
    'error:hidden': '-translate-y-1.5 opacity-0',
    'error:offset': '-mb-4',
  },
  iframe_cn: {
    box: 'w-full h-full',
    iframe: 'border-0 m-0 p-0 overflow-hidden',
  },
  img_cn: {
    box: 'bg-no-repeat',
    img: 'h-full mx-auto',
  },
  input_cn: {
    box: 'flex items-center relative transition-colors duration-300',
    'box:outlined:normal': 'cursor-text border-bdr rounded focus-within:border-ipt-focus focus-within:hover:border-ipt-focus',
    'box:outlined:error': 'border-error cursor-text bg-ipt-bg text-error',
    'box:outlined:bordered': 'border border-solid bg-ipt-bg',
    'box:outlined:nobordered': 'border-0',
    disabled: 'bg-disabled text-disabled-text cursor-not-allowed',
    'box:input:large': 'py-2 px-4 h-12 text-base',
    'box:input:normal': 'py-1.5 px-3 h-8 text-sm',
    'box:input:small': 'py-1.5 px-3 h-8 text-xs',
    'box:input:mini': 'py-0 px-2 h-6 text-xs',
    'box:textarea:large': 'text-lg',
    'box:textarea:normal': 'text-base',
    'box:textarea:small': 'text-sm',
    'box:textarea:mini': 'text-xs',
    'textarea:large': 'py-2 px-4 min-h-12',
    'textarea:normal': 'py-1.5 px-3 min-h-10',
    'textarea:small': 'py-1.5 px-3 min-h-8',
    'textarea:mini': 'py-0 px-2 min-h-6',
    standard: 'absolute z-1 w-full h-px bottom-0 right-0 transition-colors duration-300',
    'standard:normal': 'bg-border-1 peer-focus:bg-ipt-focus peer-focus:h-px peer-focus:animate-standard-line',
    'standard:error': 'bg-error',
    input: 'border-0 bg-transparent text-ipt-color w-full outline-none placeholder:text-pld-color placeholder:text-ipt-pld-color peer text-sm',
    label: 'absolute pointer-events-none transition-all duration-100',
    'label:textarea:large': 'top-2 left-4',
    'label:textarea:normal': 'top-1.5 left-3',
    'label:textarea:small': 'top-1.5 left-3',
    'label:textarea:mini': 'top-0 left-2',
    'label:active': '-translate-x-1/5 -translate-y-17/20 scale-75 bg-ipt-bg text-ipt-color peer-focus:text-ipt-focus',
    'label:noactive': 'translate-x-0 translate-y-0 scale-100 bg-transparent text-ipt-label',
    maxlength: 'absolute bottom-2 right-2',
    currentlength: 'text-ipt-focus',
    clear: 'inline-block text-clear ml-2 cursor-pointer',
    clearfixed: 'absolute right-0 top-0 mr-2 mt-2',
    'password:icon': 'text-lg text-primary cursor-pointer',
  },
  flex_cn: {
    box: 'w-full',
    row: 'flex flex-wrap w-full',
    col: 'border-bdr text-split p-1 flex items-center justify-center',
    'col:first': 'border-l-0',
    'col:first-no': 'border-l',
    'col:first-r': 'border-l',
    'col:first-c': 'border-l-0',
  },
  scrollx_cn: {
    box: 'flex flex-1 shrink-0 whitespace-nowrap overflow-hidden relative h-7 text-sm py-1',
    list: 'absolute text-split whitespace-pre',
    animation: 'animate-scroll-x animate-running hover:animate-paused',
    text: 'mr-2',
  },
  tabs_cn: {
    box: 'flex w-full flex-auto',
    'box:horizontal': 'flex-col flex-1 overflow-y-hidden',
    'box:vertical': '',
    titles: 'relative text-base flex-nowrap',
    'titles:horizontal': 'flex items-center overflow-x-auto overflow-y-hidden mb-2',
    'titles:vertical': '',
    title: 'text-center transition-all duration-250 relative overflow-hidden text-nowrap break-keep whitespace-nowrap',
    'title:horizontal': 'p-2 mx-2',
    'title:vertical': 'flex-1-0-auto mt-1.5 first:mt-0',
    'title:disabled': 'bg-disabled text-disabled-text cursor-not-allowed',
    'title:nodisabled': 'cursor-pointer',
    'title:mini': 'px-1 w-12 h-6',
    'title:small': 'px-2.5 py-1 w-24 h-8',
    'title:normal': '',
    'title:large': 'px-5 py-2.5 w-25 h-10',
    'title:active': 'text-primary',
    indicator: 'absolute bg-primary rounded-3xl transition-left-top duration-250 z-1',
    'indicator:horizontal': 'h-1 bottom-0',
    'indicator:vertical': 'w-0.5 left-0',
    content: '',
    'content:horizontal': 'w-full flex-1 whitespace-nowrap overflow-hidden',
    'content:vertical': 'flex-auto overflow-hidden relative',
    contentitem: 'w-full',
    'contentitem:horizontal': '',
    'contentitem:vertical': '',
  },
  progress_cn: {
    box: 'flex items-center justify-between',
    linear: 'rounded w-full h-2 bg-split flex-1',
    circle: '',
    'linear:percent': 'rounded bg-primary h-full transition-width duration-200',
    'circle:percent': '',
    label: 'w-12 text-right text-primary',
  },
  dialog_cn: {
    mask: 'fixed left-0 right-0 top-0 bottom-0 z-1000 bg-mask',
    'mask:center': 'flex items-center justify-center',
    box: 'fixed z-1000',
    'box:right': 'right-0 top-0 w-64 h-full rounded-l-3xl',
    'box:right:apper': 'animate-translate-x-100-0',
    'box:right:disapper': 'animate-translate-x-0-100',
    'box:left': 'left-0 top-0 w-64 h-full rounded-r-3xl',
    'box:left:apper': 'animate-translate-x-m100-0',
    'box:left:disapper': 'animate-translate-x-0-m100',
    'box:top': 'min-h-48 w-full top-0 left-0 right-0 rounded-b-3xl',
    'box:top:apper': 'animate-translate-y-m100-0',
    'box:top:disapper': 'animate-translate-y-0-m100',
    'box:bottom': 'min-h-48 w-full bottom-0 left-0 right-0 rounded-t-3xl',
    'box:bottom:apper': 'animate-translate-y-100-0',
    'box:bottom:disapper': 'animate-translate-y-0-100',
    'box:center': 'left-0 right-0 top-0 bottom-0 flex items-center px-3',
    'box:center:apper': 'animate-zoom-0-100',
    'box:center:disapper': 'animate-zoom-100-0',
    body: 'w-full',
    header: 'flex items-center',
    'header:inclose': 'justify-between',
    'header:noclose': 'justify-center',
    'close:icon': 'cursor-pointer px-4 py-2 text-close absolute right-0 top-0',
    footer: '',
  },
  datepicker_cn: {
    title: 'relative',
    range: 'flex items-center justify-center',
    ipt: form_ipt_com,
    picker: {},
    split: 'mx-2',
  },
  picker_cn: {
    box: 'w-full bg-white transition-colors duration-300 py-3',
    input: {
      box: 'flex items-center relative transition-border-bg-color duration-300',
      ...form_ipt_com,
    },
    suffix: 'text-desc text-sm transition-all duration-300',
    'suffix:expand': 'rotate-180',
    'suffix:retract': 'rotate-0',
    header: 'flex items-center justify-between text-sm text-primary-text mb-2.5 bg-transparent',
    cancel: 'cursor-pointer px-3 py-1 hidden',
    confirm: 'text-primary px-3 py-1 cursor-pointer hidden',
    content: 'flex items-center justify-between relative text-sm text-primary-text cursor-grab h-60',
    mask: 'absolute pointer-events-none top-0 left-0 w-full h-full bg-no-repeat bg-white-gray-1 bg-top-bottom',
    picked: 'absolute w-full left-0 border-y border-split pointer-events-none z-1 transition-border duration-300',
    column: 'flex-1 text-center overflow-hidden h-full',
    'column:active': 'text-ipt-focus',
    scroll: 'pb-25',
    item: 'px-1 truncate',
  },
  group_cn: {
    box: 'w-full h-full flex item-center',
    item: 'flex item-center',
    'item:x': 'mr-5 last:m-0',
    'item:y': 'block mb-2.5',
  },
  radio_cn: {
    box: 'flex items-center text-sm',
    disabled: 'cursor-not-allowed text-disabled-text border-bdr-disabled',
    label: 'mr-5 ml-2.5',
    value: 'relative w-4 h-4 border border-solid border-color-19 focus-within:hover:border-color-21 rounded-full transition-colors duration-200',
    'value:disabled': 'border-bdr-disabled hover:border-bdr-disabled bg-disabled',
    'value:hover': '',
    'value:checked':
      'border-color-21 bg-transparent animate-checked-animate after:w-[56%] after:h-[56%] after:absolute after:bg-color-21 after:rounded-full after:translate-x-2/5 after:translate-y-2/5',
    radio: 'absolute z-1 inset-0 w-full h-full opacity-0 pointer-events-none peer',
  },
};

export const flexGridCn = {
  box: 'w-full',
  row: 'flex flex-wrap w-full gap-y-2',
  col: 'rounded relative',
  'col:first': 'ml-2',
  'col:first-no': 'ml-2',
  'col:first-r': 'mt-0 ml-2',
  'col:first-c': 'ml-2',
  test: 'w-1/2 w-1/3',
};

/** 提现页面的输入框样式 */
export const deposit_input_cn = {
  item: 'relative text-xs my-2',
  label: 'absolute left-0 top-0 h-8 flex items-center px-3',
  suffix: 'absolute right-0 top-0 h-8 flex items-center px-3',
  input:
    'border text-xs placeholder:text-xs border-solid border-bdr-1 outline-none rounded pl-24 py-1 text-sm placeholder:text-sm w-full focus:border-color-21 focus:shadow-sld disabled:bg-color-19 h-8',
};

export const com_input =
  // eslint-disable-next-line max-len
  'border text-xs placeholder:text-xs border-solid border-bdr-1 outline-none rounded px-2 py-1 text-sm placeholder:text-sm w-full focus:border-color-21 focus:shadow-sld disabled:bg-color-19 h-8 cursor-pointer flex-1';

// 通用复选框样式
export const com_checked = {
  box: 'inline-flex items-center',
  disabled: 'cursor-not-allowed text-disabled-text',
  value: 'relative w-4.5 h-4.5 rounded border border-solid focus-within:border-color-21 border-color-19 duration-200 transition-colors',
  'value:hover': '',
  'value:disabled': 'bg-disabled border-disabled',
  'value:checked':
    // eslint-disable-next-line max-len
    'border-color-21 bg-color-21 after:border-l-2 after:border-b-2 after:border-ipt-focus after:absolute after:w-7/10 after:h-2/5 after:translate-x-13/50 after:translate-y-3/5 after:-rotate-45 after:border-white',
  label: 'mx-2.5',
  checkbox: 'absolute z-1 inset-0 pointer-events-none w-full h-full opacity-0 peer',
};
